﻿    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
    <!--<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/css/ui.jqgrid.css" />-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>-->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
    <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>-->
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script><script type="text/javascript">
    $(document).ready(function () {
        $.jgrid.nav.addtext = "Add";
        $.jgrid.nav.edittext = "Edit";
        $.jgrid.nav.deltext = "Delete";
        jQuery("#data").jqGrid({
            url: '/AdminProduct/GetListProducts/',
            mtype: 'POST',
            datatype: "json",
            jsonReader: {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: false,
                id: "ID",
            },
            colNames: ['ID', 'ProductName', 'Price', 'Size', 'Weight', 'Amount', 'Warranty', 'Rating', 'NumRating'],
            colModel: [
                { name: 'ID', index: 'ID', width: 35, editable: true, editoptions:{readonly:true}, sorttype: "int" },
                { name: 'ProductName', index: 'ProductName', width: 150, editable: true },
                { name: 'Price', index: 'Price', width: 200, editable: true },
                { name: 'Size', index: 'Size', width: 70, editable: true },
                { name: 'Weight', index: 'Weight', width: 70, editable: true },
                { name: 'Amount', index: 'Amount', width: 70, editable: true },
                { name: 'Warranty', index: 'Warranty', width: 70, editable: true },
                { name: 'Rating', index: 'Rating', width: 70, editable: true },
                { name: 'NumRating', index: 'NumRating', width: 70, editable: true },
            ],
            //toolbar: [true, "top"],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager',
            sortname: 'Name',
            viewrecords: true,
            sortorder: "desc",
            caption: "Assets",
            editurl: '/AdminProduct/Delete/'
        });
        jQuery("#data").jqGrid('filterToolbar');
        jQuery("#data").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true }, {
            mtype: "POST", reloadAfterSubmit: false,
            onclickSubmit: function (rp_ge, postdata) {
                rp_ge.url = '/AdminProduct/SaveChange?' + 'ID=' + postdata.ID + '&ProductName=' + postdata.ProductName + '&Price=' + postdata.Price + '&Size=' + postdata.Size + '&Weight=' + postdata.Weight + '&Amount=' + postdata.Amount + '&Warranty=' + postdata.Warranty + '&Rating=' + postdata.Rating + '&NumRating=' + postdata.NumRating;
            }
        }, {
            mtype: "POST", reloadAfterSubmit: true,
            onclickSubmit: function (rp_ge, postdata) {
                var url = '/AdminProduct/SaveChange?' + 'ID=0' + '&ProductName=' + postdata.ProductName + '&Price=' + postdata.Price + '&Size=' + postdata.Size + '&Weight=' + postdata.Weight + '&Amount=' + postdata.Amount + '&Warranty=' + postdata.Warranty + '&Rating=' + postdata.Rating + '&NumRating=' + postdata.NumRating;
                rp_ge.url = '/Home/Index';
                $.ajax({
                    type: "POST",
                    url: url,
                    success: function (data) {
                        $('#abc').html("fjkdjlf");
                    }
                });
            },

            serializeDelData: function (postdata) { return ""; }
        });

    });
</script>
<h2>@ViewBag.Message</h2>
@using (Html.BeginForm("","", FormMethod.Post, new { id = "ProductsForm" }))
{
    <table id="data">
    </table>
    <div id="pager">
    </div>
    <div id="abc"></div>
}